<template>
  <div>
    <!--    <composite-api-test/>-->
<!--    <react-test/>-->

    <!--        <ant-table/>-->
    <div class="welcome">
      <!-- <p class="titleName">{{JSON.parse(localStorage.getItem('getInfo')).RealName}}</p> -->
      <div class="titleName">
        <span>{{userName}}</span>
        <a href="http://192.168.1.135/CLodop_Setup4.0(Beta)(1).zip" style="margin-right:20px;color:red">打印链接下载</a>

<!--        <el-link-->
<!--          :href="nodeZip"-->
<!--          style="position: absolute;bottom: 10px;right: 20px;" type="primary">下载称重工具-->
<!--        </el-link>-->
      </div>
      <p class="bottomsize">欢迎使用MES生产管理系统，今天{{systemDate}}。您有5个<span style="color:red">待办事项</span>，请注意及时处理。感谢您的辛勤付出！</p>
    </div>
    <div class="btnShow">
      <ul>
        <el-row :gutter="10">
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='200' :startVal='0'></countTo>
                </p>
                <p class="bottom">待排产订单</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='300' :startVal='0'></countTo>
                </p>
                <p class="bottom">生产中订单</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='400' :startVal='0'></countTo>
                </p>
                <p class="bottom">待发货订单</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1);">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='500' :startVal='0'></countTo>
                </p>
                <p class="bottom">超时预警订单</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='600' :startVal='0'></countTo>
                </p>
                <p class="bottom">生产遗留订单</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='700' :startVal='0'></countTo>
                </p>
                <p class="bottom">今日订单总数</p>
              </div>
            </li>
          </el-col>
          <el-col :md="3" :sm="7">
            <li style="border:1px solid rgba(238,238,238,1)">
              <div class="divide">
                <p class="top">
                  <countTo :endVal='800' :startVal='0'></countTo>
                </p>
                <p class="bottom">待排产订单</p>
              </div>
            </li>
          </el-col>
        </el-row>
      </ul>
    </div>
    <div class="foreshow">
      <div class="foreshowLeft">
        <div class="iconBginform"></div>
        <!-- <span class="font_size">1.修改入库仓库不能选择BUG；2，修复进销存不准；3，修复采购单不能选择供应商BUG；4，优化删除供应商提示。</span> -->
        <ul :class="{anim:animate==true}" id="con1" ref="con1">
          <li :key="index" class="listMessage" v-for='(item,index) in items'>{{item.name}}</li>
        </ul>
      </div>
      <div class="foreshowRight">
        <span style="font-size:14px;color:rgba(153,153,153,1);">2019-05-12  12:15:56</span>
      </div>
    </div>
    <div class="tableContent">
      <div class="tableLeft">
        <p style="margin-left:15px">代办事项</p>
        <div class="tablecont">
          <Table></Table>
        </div>
      </div>
      <div class="tableRight">
        <div class="lineOne" id="myChart"></div>
      </div>
    </div>
    <div class="formMaking">
      <div class="formMakingLeft">
        <div class="tableform">
          <div><span class="titleTable">生产直通率日报表</span></div>
          <div class="tableData">
            <formTable></formTable>
          </div>
        </div>
      </div>
      <div class="formMakingRight">
        <div class="lineOne" id="myChartT"></div>
        <div class="lineOne" id="myChartThree"></div>
      </div>
    </div>
    <div class="fixed"></div>
  </div>
</template>

<script>

  import countTo from 'vue-count-to'
  import Table from './component/dashboardTable'
  import formTable from './component/reportFormsTable'
  import AntTable from '@/views/dashboard/AntTable'
  import CompositeApiTest from '@/views/dashboard/CompositeApiTest'
  // import reactTest from '@/views/dashboard/ReactTest'

  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

  // const nodeZip = require('../../zip/package.zip')

  export default {
    name: 'dashboard',
    data() {
      return {
        // nodeZip,

        myChart: null,
        myChartT: null,
        myChartThree: null,
        animate: false,
        items: [
          { name: '1.修改入库仓库不能选择BUG' },
          { name: '2，修复进销存不准；' },
          { name: '3，修复采购单不能选择供应商BUG' },
          { name: '4，优化删除供应商提示。' }
        ],
        systemDate: '',
        userName: ''
      }
    },
    created() {
      setInterval(this.scroll, 3000)

    },
    mounted() {
      this.drawLine()
      this.drawLineT()
      this.drawLineThree()
      this.init()
      this.addDate()
      this.getUserName()

    },
    components: { CompositeApiTest, AntTable, countTo, Table, formTable },
    methods: {
      scroll() {
        this.animate = true    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.items.push(this.items[0])  // 将数组的第一个元素添加到数组的
          this.items.shift()               //删除数组的第一个元素
          this.animate = false  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500)
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
          title: {
            text: '生产不良率月报表'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        })
      },
      drawLineT() {
        this.myChartT = echarts.init(document.getElementById('myChartT'))
        this.myChartT.setOption({
          title: {
            text: '今日产能变化趋势图'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        })
      },
      drawLineThree() {
        this.myChartThree = echarts.init(document.getElementById('myChartThree'))
        this.myChartThree.setOption({
          title: {
            text: '各工位实时产能监控'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }]
        })
      },
      init() {  //关键三
        setTimeout(() => {
          window.addEventListener('resize', () => {
            this.myChart.resize()
            this.myChartT.resize()
            this.myChartThree.resize()
          })
        }, 20)
      },
      destroyed() {   //关键四
        window.removeEventListener('resize', this.init, 20)
      },
      addDate() {
        var nowDate = new Date()
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
          day: nowDate.getDay()
        }
        if (date.month >= 1 && date.month <= 9) {
          date.month = '0' + date.month
        }
        if (date.date >= 0 && date.date <= 9) {
          date.date = '0' + date.date
        }
        if (date.day == 1) {
          date.day = '星期一'
        } else if (date.day == 2) {
          date.day = '星期二'
        } else if (date.day == 3) {
          date.day = '星期三'
        } else if (date.day == 4) {
          date.day = '星期四'
        } else if (date.day == 5) {
          date.day = '星期五'
        } else if (date.day == 6) {
          date.day = '星期六'
        } else {
          date.day = '星期天'
        }
        this.systemDate = date.year + '-' + date.month + '-' + date.date + ' ' + date.day
        console.log(this.systemDate)
      },
      getUserName() {
        this.userName = JSON.parse(localStorage.getItem('getInfo')).RealName
        console.log(this.userName)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fixed {
    width: 60px;
    height: 60px;
    background-image: url('./image/添加.png');
    background-size: 100% 100%;

    position: fixed;
    top: 400px;
    right: 10px;
  }

  .welcome {
    position: relative;
    width: 99%;
    height: 60px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #dcdfe6;
    margin: 6px auto 0;
    padding-left: 40px;

    .titleName {
      margin-top: 7px;
      display: flex;
      justify-content: space-between;
      font-family: "楷体", "楷体_GB2312";
      font-size: 14px;
    }

    .bottomsize {
      text-indent: 35px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      margin: 5px 0 30px 0;
    }
  }

  .btnShow {
    width: 100%;
    height: 100%;
    margin-left: 100px;
    margin-top: 6px;
    padding: 15px 0;
    overflow: hidden;

    li:hover {
      background: #0095FF;
    }

    li:hover .divide .top {
      color: #ffffff;
    }

    li:hover .divide .bottom {
      color: #ffffff;
    }

    li {
      width: 100%;
      height: 100px;
      border-radius: 5px;
      float: left;
      margin-left: 20px;

      .divide {
        width: 100%;
        height: 100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        text-align: center;

        .top {
          margin-top: 10px;
          color: #0095FF;
        }

        .bottom {
          font-size: 16px;
          color: #999999
        }

        p {
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
  }

  .tableContent {
    width: 98%;
    height: 100%;
    margin: 5px auto 0;
    display: flex;

    .tableLeft {
      flex: 3;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 15px 0 30px 0;
      margin-right: 15px;

      .tablecont {
        width: 95%;
        margin: 15px 0 0 25px;
      }

      p {
        color: #666666;
        font-size: 14px;
        font-weight: 600;
      }
    }

    .tableRight {
      flex: 2;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .lineOne {
        height: 300px;
        margin-top: 10px;
      }
    }
  }

  .formMaking {
    width: 98%;
    margin: 10px auto 0;
    display: flex;
    height: 1000px;

    .formMakingLeft {
      padding-top: 15px;
      flex: 3;
      margin-right: 15px;
      height: 300px;
      margin-top: 10px;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .tableform {
        margin-top: 5px;
        width: 99%;
        height: 300px;

        .tableData {
          margin: 10px 0 0 30px;
        }

        .titleTable {
          color: #000000;
          font-size: 20px;
          font-weight: 600;
          margin-left: 15px;
        }
      }
    }

    .formMakingRight {
      flex: 2;
      height: 400px;

      .lineOne {
        padding-top: 15px;
        height: 300px;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-top: 10px;
      }
    }
  }

  .foreshow {
    width: 99%;
    height: 35px;
    margin: 0 auto;
    padding-left: 20px;
    line-height: 35px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;

    .iconBginform {
      float: left;
      margin-top: 6px;
      width: 16px;
      height: 16px;
      background-image: url('./image/laba.png');
    }

    .font_size {
      font-size: 14px;
      color: #666666;
      margin-left: 15px;
    }
  }

  /deep/ .el-col-sm-7 {
    margin-bottom: 10px;
  }

  #box {
    width: 300px;
    height: 32px;
    overflow: hidden;
    padding-left: 30px;
    border: 1px solid black;
  }

  .anim {
    transition: all 0.5s;
    margin-top: -30px;
  }

  #con1 li {
    list-style: none;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    color: #666666;
    margin-left: 30px;
  }
</style>
